@use "sass:color";

@mixin sizes() {
  --emoji-size: 1.375rem; /* Width and height of all emoji */
  --emoji-padding: 0.5rem; /* Vertical and horizontal padding on emoji */
  --category-emoji-size: var(--emoji-size); /* Width/height of category emoji, if you want it to be different from `--emoji-size` */
  --category-emoji-padding: var(--emoji-padding); /* Vertical/horizontal padding on category emoji, if you want it to be different from `--emoji-padding` */
  --indicator-height: 3px; /* Height of the nav indicator */
  --input-border-radius: 0.5rem;
  --input-border-size: 1px;
  --input-font-size: 1rem;
  --input-line-height: 1.5;
  --input-padding: 0.25rem;
  --num-columns: 8; /* How many columns to display in the emoji grid */
  --outline-size: 2px; /* Focus outline width */
  --border-size: 1px; /* Width of border used in most of the picker */
  --border-radius: 0; /* Border radius of the entire picker */
  --skintone-border-radius: 1rem; /* Border radius of the skintone dropdown */
  --category-font-size: 1rem; /* Font size of custom emoji category headings */
}

@mixin colors($dark) {
  $bg: #fff;
  $border: #e0e0e0;
  $indicator: #385ac1;
  $input-border: #999;
  $input-color: #111;
  $input-placeholder: #999;
  $outline: #999;
  $categoryFontColor: #111;
  @if $dark {
    color-scheme: dark;
  }
  @else {
    color-scheme: light;
  }
  @if $dark {
    $bg: #222;
    $border: #444;
    $indicator: #5373ec;
    $input-border: #ccc;
    $input-color: #efefef;
    $input-placeholder: #ccc;
    $outline: #fff;
    $categoryFontColor: #efefef;
  }

  --background: #{$bg}; /* Background of the entire `<emoji-picker>` */
  --border-color: #{$border};
  --indicator-color: #{$indicator}; /* Color of the nav indicator */
  --input-border-color: #{$input-border};
  --input-font-color: #{$input-color};
  --input-placeholder-color: #{$input-placeholder};
  --outline-color: #{$outline}; /* Focus outline color */
  --category-font-color: #{$categoryFontColor}; /* Font color of custom emoji category headings */

  // Some of these were originally `color.adjust()`ed, but are now hardcoded because in
  // Sass 1.79.0 the `color.*` APIs changed to emit `rgb()` here and I prefer the shorter hex format.
  // See https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1790
  @if $dark {
    // #{color.adjust($bg, $lightness: 20%)};
    --button-active-background: #555555;
    // #{color.adjust($bg, $lightness: 15%)};
    --button-hover-background: #484848;
  }

  @else {
    // #{color.adjust($bg, $lightness: -10%)};
    --button-active-background: #e6e6e6; /* Background of an active button */
    // #{color.adjust($bg, $lightness: -15%)};
    --button-hover-background: #d9d9d9; /* Background of a hovered button */
  }
}

:host {
  @include sizes();
  display: flex;
  width: min-content;
  height: 400px;
}

:host,
:host(.light) {
  @include colors(false);
}

:host(.dark) {
  @include colors(true);
}

@media (prefers-color-scheme: dark) {
  :host {
    @include colors(true);
  }
}

// See https://developers.google.com/web/fundamentals/web-components/best-practices
:host([hidden]) {
  display: none;
}
